<template>
	<view>
		<view class="u-wrap">
			<nav-bars bgColor="#fff" fontColor="#000" title="素材中心"></nav-bars>
			<view class="u-search-box">
				<view class="u-search-inner">
					<u-icon name="search" color="#909399" :size="28"></u-icon>
					<input placeholder-style="color:#939393;" placeholder="搜索想参与的话题吧" confirm-type="search" type="text" v-model="keyword" @confirm="SearchList" />
				</view>
			</view>
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<view
						v-for="(item, index) in leftTabs"
						:key="index"
						class="u-tab-item"
						:class="[current == index ? 'u-tab-item-active' : '']"
						:data-current="index"
						@tap.stop="swichMenu(item, index)"
					>
						<text class="u-line-1">{{ item.type_name }}</text>
					</view>
				</scroll-view>
				<block>
					<scroll-view scroll-y class="right-box" @scrolltolower="GoodsScrolltolower">
						<view class="page-view">
							<view class="class-item">
								<view class="item-container">
									<!-- rightList -->
									<view v-for="(item1, index1) in rightList" :key="index1" class="ArticleView" @click="GoDetails(item1)">
										<view class="ArticleLeft">
											<view class="ArticleImg"><image :src="item1.cover"></image></view>
											<view class="ellipsisText ArticleTitle">{{ item1.title }}</view>
										</view>
										<view class="ArticleShare">
											<view class="ArticleShareView" @click.stop="ShareUserApp(item1)">
												<image src="https://cos.ryz1620.com/liankun/static/MaterialShare.png"></image>
												<view>分享</view>
											</view>
										</view>
									</view>
									<view v-if="rightList.length == 0" style="margin-top: 30%;">
										<u-empty text="暂无数据" mode="list" icon-size="400" src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
									</view>
									<!--  -->
									<view style="flex: 1;" v-if="rightList.length > 0 && Total >= 10"><u-loadmore :status="loadStatus"></u-loadmore></view>
								</view>
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<button open-type="share" @click="is_show_model = false" class="sharebtn"></button>
					</view>
					<view class="md-content-item" @click="sharePoster">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
// import classifyData from './data.js';
import Http from '@/service/material.js';
export default {
	data() {
		return {
			// tabbar: classifyData,
			scrollTop: 0, //tab标题的滚动条位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			keyword: '',
			leftTabs: [],
			rightList: [],
			leftId: '',
			loadStatus: 'loadmore',
			pagesize: 10,
			page: 1,
			Total: 0,
			is_show_model: false, //是否显示分享模态窗
			ArticleID: '',
			title: '',
			ShareImg: '',
			shaeMessage: ''
		};
	},
	computed: {},
	mounted() {
		this.GetLeftTabs();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
		}
		return {
			title: this.title,
			path: '/pages_now/pages/material/details?id=' + this.ArticleID,
			imageUrl: this.ShareImg,
			success: function(res) {
				console.log('成功', res);
			}
		};
	},
	onLoad(params) {
		this.$utils.getUrl()
	},
	methods: {
		gitis_show_model() {
			this.is_show_model = true;
		},
		GoDetails(row){
			uni.navigateTo({
				url: '/pages_now/pages/material/details?id=' + row.id,
			});
		},
		//分享海报
		sharePoster() {
			//获取带参数二维码并传递
			this.is_show_model = false;
			uni.navigateTo({
				url: '/pages_now/pages/material/share?id=' + this.ArticleID
			});
		},
		ShareUserApp(row) {
			this.ArticleID = row.id;
			this.title = row.title;
			this.ShareImg = row.cover;
			this.is_show_model = true;
		},
		GoodsScrolltolower(e) {
			var that = this;
			that.page++;
			let params = {
				pagesize: that.pagesize,
				page: that.page,
				type_id: that.leftId,
				keyword: that.keyword
			};
			Http.getArticleList(params).then(res => {
				if (res.code == 1) {
					var data = res.data.articles;
					that.Total = res.data.total;
					if (data.length == 0) {
						that.loadStatus = 'nomore';
						return;
					} else {
						that.loadStatus = 'loadmore';
					}
					setTimeout(() => {
						that.rightList = that.rightList.concat(data);
					}, 500);
				}
			});
		},
		GetLeftTabs() {
			var that = this;
			let params = {};
			Http.getCategory(params).then(res => {
				if (res.code == 1) {
					var data = res.data;
					// console.log(data);
					that.leftTabs = data;
					that.leftId = data[0].id;
					that.GetRightList();
					// console.log(that.leftId);
				}
			});
		},
		GetRightList() {
			var that = this;
			that.page = 1;
			let params = {
				pagesize: that.pagesize,
				page: that.page,
				type_id: that.leftId,
				keyword: that.keyword
			};
			Http.getArticleList(params).then(res => {
				if (res.code == 1) {
					var data = res.data.articles;
					that.Total = res.data.total;
					that.rightList = data;
				}
			});
		},
		SearchList(e) {
			var that = this;
			that.GetRightList();
		},
		// 点击左边的栏目切换
		async swichMenu(row, index) {
			var that = this;
			if (index == that.current) return;
			that.current = index;
			// 如果为0，意味着尚未初始化
			if (that.menuHeight == 0 || that.menuItemHeight == 0) {
				await that.getElRect('menu-scroll-view', 'menuHeight');
				await that.getElRect('u-tab-item', 'menuItemHeight');
			}
			that.keyword = '';
			that.leftId = row.id;
			that.GetRightList();
			// 将菜单菜单活动item垂直居中
			that.scrollTop = index * that.menuItemHeight + that.menuItemHeight / 2 - that.menuHeight / 2;
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields({ size: true }, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					})
					.exec();
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff !important;
}
.ellipsisText {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}
.u-search-box {
	padding: 18rpx 30rpx;
}
.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}
.u-search-inner {
	background-color: #f6f7fb;
	border-radius: 100rpx;
	display: flex;
	height: 70rpx;
	align-items: center;
	padding: 0rpx 16rpx;
	input {
		flex: 1;
		height: 100%;
		margin-left: 14rpx;
	}
}
.u-search-text {
	font-size: 26rpx;
	color: $u-tips-color;
	margin-left: 10rpx;
}
.u-tab-view {
	width: 200rpx;
	height: 100%;
	background-color: #f6f7fb;
}
.u-tab-item {
	height: 110rpx;
	background: #f6f7fb;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
	line-height: 1;
}

.u-tab-item-active {
	position: relative;
	color: #c3ab7c;
	font-size: 30rpx;
	font-weight: 600;
	background: #fff;
}

.u-tab-item-active::before {
	content: '';
	position: absolute;
	border-left: 4px solid #c3ab7c;
	height: 32rpx;
	left: 0;
	top: 39rpx;
}
.u-tab-view {
	height: 100%;
}

.right-box {
	background-color: #fff;
}

.page-view {
	padding: 0rpx 16rpx 16rpx 16rpx;
}

.class-item {
	margin-bottom: 30rpx;
	background-color: #fff;
	padding: 16rpx;
	border-radius: 8rpx;
}

.item-title {
	font-size: 26rpx;
	color: $u-main-color;
	font-weight: bold;
}

.item-menu-name {
	font-weight: normal;
	font-size: 24rpx;
	color: $u-main-color;
}

.item-container {
	.ArticleView {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		border-bottom: 2rpx solid #f9f9f9;
		padding-bottom: 28rpx;
		margin-bottom: 28rpx;
		.ArticleLeft {
			display: flex;
			align-items: center;
			.ArticleImg {
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 8rpx;
			}
			.ArticleTitle {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 21rpx;
				flex: 1;
			}
		}
		.ArticleShare {
			.ArticleShareView {
				display: flex;
				align-items: center;
				background: #f6eede;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					margin-top: 4rpx;
				}
				view {
					font-size: 24rpx;
					color: #a88e5a;
				}
			}
		}
	}
}

.thumb-box {
	width: 33.333333%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 20rpx;
}

.item-menu-image {
	width: 120rpx;
	height: 120rpx;
}
.cu-modal {
	position: fixed;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	display: none;
	width: 100%;
	z-index: 500;
}

.show {
	display: block;
}

.bottom-md {
	position: absolute;
	bottom: 0;
	background: #fff;
}

.share {
	position: fixed;
	color: #ffffff;
	right: 0;
	bottom: 190rpx;
	background: linear-gradient(to bottom right, #fe726b, #fe956b);
	padding: 10rpx 10rpx 10rpx 20rpx;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
}

.cancel {
	width: 100vw;
	padding: 30rpx;
	text-align: center;
	background: #ffffff;
	color: #888;
	font-weight: normal;
	font-size: 30rpx;
}

.md-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 50rpx 0;
}

.md-content-item {
	margin: 0 90rpx;
	position: relative;
}

.md-content-item image {
	width: 100rpx;
	height: 100rpx;
	margin: auto;
}

.md-content-item view {
	margin-top: 15rpx;
	font-size: 28rpx;
}

.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.md-content-item .s_bIcon {
	font-size: 72rpx;
}

.s_bIcon {
	width: 112rpx;
	height: 112rpx;
	color: #fff;
	font-size: 140rpx;
	margin: 60rpx auto 0;
	border-radius: 50%;
	background: #8bc37a;
	box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
	display: flex;
	justify-content: center;
	align-items: center;
}

.s_bIcons {
	background: #ffd425;
}
</style>
